<!-- Quick Start Section -->
<section id="usage" class="section quickstart-section">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Quick Start</h2>
            <p class="section-subtitle">
                Get up and running in minutes with our easy-to-use SDKs
            </p>
        </div>
        
        <div class="quickstart-tabs">
            <div class="tab-buttons">
                <button class="tab-btn active" data-tab="install">📦 Installation</button>
                <button class="tab-btn" data-tab="javascript">🟨 JavaScript</button>
                <button class="tab-btn" data-tab="python">🐍 Python</button>
                <button class="tab-btn" data-tab="api">🌐 REST API</button>
            </div>
            
            <div class="tab-content">
                <!-- Installation Tab -->
                <div class="tab-pane active" data-tab="install">
                    <div class="install-grid">                        <div class="install-option">
                            <h3>📦 JavaScript SDK</h3>
                            <div class="code-block">
                                <pre><code># Download JavaScript SDK
curl -O https://raw.githubusercontent.com/TingjiaInFuture/allbeapi/main/SDK/JavaScript/allbeapi.js

# Or use wget
wget https://raw.githubusercontent.com/TingjiaInFuture/allbeapi/main/SDK/JavaScript/allbeapi.js</code></pre>
                            </div>
                            <p>Perfect for Node.js applications and web projects.</p>
                        </div>
                        
                        <div class="install-option">
                            <h3>🐍 Python SDK</h3>
                            <div class="code-block">
                                <pre><code># Download Python SDK
curl -O https://raw.githubusercontent.com/TingjiaInFuture/allbeapi/main/SDK/Python/allbeapi.py

# Or use wget
wget https://raw.githubusercontent.com/TingjiaInFuture/allbeapi/main/SDK/Python/allbeapi.py</code></pre>
                            </div>
                            <p>Great for Python applications and scripts.</p>
                        </div>
                        
                        <div class="install-option">
                            <h3>📁 Direct Download</h3>
                            <div class="download-links">
                                <a href="SDK/JavaScript/allbeapi.js" class="btn btn-outline" download>
                                    📄 JavaScript SDK
                                </a>
                                <a href="SDK/Python/allbeapi.py" class="btn btn-outline" download>
                                    🐍 Python SDK
                                </a>
                            </div>
                            <p>Download and include directly in your project.</p>
                        </div>
                    </div>
                </div>
                
                <!-- JavaScript Tab -->
                <div class="tab-pane" data-tab="javascript">
                    <div class="quickstart-demo">
                        <div class="demo-steps">
                            <div class="step">
                                <div class="step-number">1</div>
                                <div class="step-content">                                    <h4>Include the SDK</h4>
                                    <div class="code-block">
                                        <pre><code>&lt;script src="./allbeapi.js"&gt;&lt;/script&gt;
// Or via CDN:
// &lt;script src="https://cdn.jsdelivr.net/gh/TingjiaInFuture/allbeapi@3/SDK/JavaScript/allbeapi.js"&gt;&lt;/script&gt;
// Or if using Node.js:
// const AllBeApi = require('./allbeapi.js');</code></pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="step">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h4>Initialize the client</h4>
                                    <div class="code-block">
                                        <pre><code>const api = new AllBeApi({
    baseUrl: 'https://res.allbeapi.top', // Optional custom endpoint
    timeout: 10000 // Optional timeout setting
});</code></pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="step">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h4>Start using the APIs</h4>
                                    <div class="code-block">
                                        <pre><code>// Convert Markdown to HTML
const markdownText = "# Hello World";
api.marked.render(markdownText).then(html => {
  console.log(html);
  // Assuming you have an element with id="markdown-output"
  // document.getElementById("markdown-output").innerHTML = html;
}).catch(error => {
  console.error("Error converting Markdown:", error);
});

// Generate QR Code
const qrBlob = await api.pythonQrcode
    .generateQrcode("https://allbeapi.com");

// Format JavaScript code
const formatted = await api.prettier.format(
    "const x=1;", { parser: "babel" }
);

// Validate JSON
const isValid = await api.ajv.validate(schema, data);</code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demo-result">
                            <h4>Live Example</h4>
                            <div class="live-demo">
                                <button id="demo-btn" class="btn btn-primary">Try Markdown Conversion</button>
                                <div id="demo-result" class="demo-output"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Python Tab -->
                <div class="tab-pane" data-tab="python">
                    <div class="quickstart-demo">
                        <div class="demo-steps">
                            <div class="step">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h4>Import the SDK</h4>
                                    <div class="code-block">
                                        <pre><code>from allbeapi import AllBeApi
# Or if using the direct file:
# import sys
# sys.path.append('SDK/Python')
# from allbeapi import AllBeApi</code></pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="step">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h4>Initialize the client</h4>
                                    <div class="code-block">
                                        <pre><code>api = AllBeApi(
    base_url='https://res.allbeapi.top',  # Optional
    timeout=10  # Optional timeout in seconds
)</code></pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="step">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h4>Use the APIs</h4>
                                    <div class="code-block">
                                        <pre><code># Convert Markdown to HTML
html = api.marked.render("# Hello World")

# Generate QR Code
qr_bytes = api.python_qrcode.generate_qrcode("https://allbeapi.com")
with open("qr.png", "wb") as f:
    f.write(qr_bytes)

# Format Python code
formatted = api.prettier.format("x=1", parser="python")

# Process images
processed = api.pillow.resize_image(image_bytes, width=300, height=200)</code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demo-result">
                            <h4>Complete Example</h4>
                            <div class="code-block">
                                <pre><code>#!/usr/bin/env python3
from allbeapi import AllBeApi

def main():
    api = AllBeApi()
    
    # Convert markdown blog post
    markdown_content = """
    # My Blog Post
    This is **important** content with [links](https://example.com).
    
    ## Code Example
    ```python
    print("Hello, World!")
    ```
    """
    
    html = api.marked.render(markdown_content)
    print("Generated HTML:", html)

    # Example: Generate a QR code and save it
    qr_data = "https://allbeapi.com"
    try:
        qr_bytes = api.python_qrcode.generate_qrcode(qr_data)
        with open("my_qr_code.png", "wb") as f:
            f.write(qr_bytes)
        print(f"QR code for '{qr_data}' saved to my_qr_code.png")
    except Exception as e:
        print(f"Error generating QR code: {e}")

    # Example: Format a snippet of Python code
    code_to_format = "def  my_func( x,y ) :\\n  return x  +  y"
    try:
        formatted_code = api.prettier.format(code_to_format, parser="python")
        print(f"Formatted code:\\n{formatted_code}")
    except Exception as e:
        print(f"Error formatting code: {e}")
        
if __name__ == "__main__":
    main()</code></pre>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- REST API Tab -->
                <div class="tab-pane" data-tab="api">
                    <div class="api-documentation">
                        <div class="api-info">
                            <h4>Base URL</h4>
                            <div class="code-block">
                                <pre><code>https://res.allbeapi.top</code></pre>
                            </div>
                        </div>
                        
                        <div class="api-examples">
                            <h4>Common API Calls</h4>
                            
                            <div class="api-example">
                                <h5>Convert Markdown to HTML</h5>
                                <div class="code-block">
                                    <pre><code>curl -X POST https://res.allbeapi.top/marked/render \
  -H "Content-Type: application/json" \
  -d '{"markdown": "# Hello **World**"}'</code></pre>
                                </div>
                            </div>
                            
                            <div class="api-example">
                                <h5>Generate QR Code</h5>
                                <div class="code-block">
                                    <pre><code>curl -X POST https://res.allbeapi.top/python-qrcode/generate-qrcode \
  -H "Content-Type: application/json" \
  -d '{"data": "https://allbeapi.com"}' \
  --output qrcode.png</code></pre>
                                </div>
                            </div>
                            
                            <div class="api-example">
                                <h5>Format Code with Prettier</h5>
                                <div class="code-block">
                                    <pre><code>curl -X POST https://res.allbeapi.top/prettier/format \
  -H "Content-Type: application/json" \
  -d '{"code": "const x=1;function test(){return x;}", "parser": "babel"}'</code></pre>
                                </div>
                            </div>
                            
                            <div class="api-example">
                                <h5>Validate JSON Schema</h5>
                                <div class="code-block">
                                    <pre><code>curl -X POST https://res.allbeapi.top/ajv/validate \
  -H "Content-Type: application/json" \
  -d '{
    "schema": {"type": "object", "properties": {"name": {"type": "string"}}},
    "data": {"name": "John"}
  }'</code></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="api-cta">
                            <a href="docs/api.html" class="btn btn-primary">Complete API Reference</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
